<template>
  <el-card>
    <div slot="header">
      <h3>指导加价率变更通知-查看</h3>
    </div>
    <div v-loading="TableInfo.loading">
      <el-row>
        <SkusTable
          ref="skusTable"
          :maxTableHeight="480"
          :dataSource="TableInfo.list"
          :columns="TableInfo.columns"
        />
      </el-row>
      <FooterFields :fieldsItems="fieldsItems" :fieldsData="fieldsData" />
    </div>
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields/DataRender';
import { TableInfo } from '@/utils/getUtils';
import { TABLE_COLUMNS, FIELDS_ITEMS } from './constants/view';
import { getProductMarkupRateTodoRecordDetailService } from '@/api/finance/salePriceManage/markupRateChangeNotice';
export default {
  components: {
    SkusTable,
    FooterFields
  },
  data () {
    return {
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      fieldsItems: FIELDS_ITEMS,
      fieldsData: {}
    }
  },
  mounted () {
    this.setDetailsByRecordNo()
  },
  methods: {
    // 设置单据页详情数据
    async setDetailsByRecordNo () {
      const data = { recordNo: this.$route?.query?.recordNo }
      const res = await getProductMarkupRateTodoRecordDetailService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        const {
          getProductMarkupRateTodoRecordsVo,
          productMarkupRateTodoRecordDetailVos
        } = res.retData
        this.TableInfo.setList(productMarkupRateTodoRecordDetailVos)
        this.fieldsData = getProductMarkupRateTodoRecordsVo
      }
    }
  }
}
</script>
